<template>
  <div class="record-check flex-center">
    <el-row class="query-section">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
        <el-form-item label="患者身份证号码" prop="idCard">
          <el-input v-model="queryParams.idCard" placeholder="请输入患者身份证号码" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            :disabled="!queryParams.idCard">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- <div v-else class="empty-text">暂无数据</div> -->
    <div class="section" v-if="isOk">
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">医院归属地区：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit" :title="info.gbname | getText">{{
                info.gbname | getText
              }}</span><el-input v-model="editData.gbname" size="normal" class="w-368" v-else placeholder="请输入医院归属地区" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">医院机构名称：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit" :title="info.orgName | getText">{{
                info.orgName | getText
              }}</span><el-input v-model="editData.orgName" size="normal" class="w-368" v-else
              placeholder="请输入医院机构名称" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">死亡卡创建日期：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit" :title="info.createDate | getText">{{
                info.createDate | getText
              }}</span><el-input v-model="editData.createDate" size="normal" class="w-368" v-else
              placeholder="请输入死亡卡创建日期" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">死亡卡查重消息：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit" :title="info.message | getText">{{
                info.message | getText
              }}</span><el-input v-model="editData.message" size="normal" class="w-368" v-else
              placeholder="请输入死亡卡查重消息" />
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { findDeathCard } from '@/api/record';
import { getExactType } from '@/utils';
import { cloneDeep } from 'lodash';

const initQueryParams = {
  idCard: '',
}


export default {
  name: "RecordCheck",
  components: {},
  data() {
    return {
      queryParams: cloneDeep(initQueryParams),
      loading: false,
      isEdit: false,
      info: { gbname: null, orgName: null, createDate: null, message: null },
      editData: {},
      isOk: false,
    };
  },
  filters: {
    getText(value) {
      let type = getExactType(value);
      return ['null', 'undefined'].includes(type) ? '-' : value;
    },
  },
  created() { },
  methods: {
    async handleQuery() {
      try {
        this.isOk = false;
        this.loading = true
        const { data } = await findDeathCard(this.queryParams)
        this.info = data
        this.loading = false
        this.isOk = true
      } catch (error) {
        this.isOk = false
        this.loading = false
        console.log("🚀 ~ handleQuery ~ error:", error)
      }
    },
    resetQuery() {
      this.resetForm("queryForm");
      Object.assign(this.queryParams, cloneDeep(initQueryParams))
      this.isOk = false;
    },
  },
};

</script>

<style lang="scss" scoped>
.record-check {
  padding: 20px;
  background-color: #f0f2f5;
  background-image: linear-gradient(154deg, rgba(7, 7, 9, 0.082) 30%, rgba(0, 107, 230, 0.3) 48%, rgba(7, 7, 9, 0.082) 64%);
  min-height: calc(100vh - 50px);
  position: relative;

  &.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .query-section {
    position: absolute;
    background-color: rgb(255, 255, 255);
    padding: 20px 20px 0px;
    top: 20px;
    left: 20px;
    right: 20px;
  }

  .w-100 {
    width: 100px;
  }

  .w-150 {
    width: 150px;
  }

  .w-200 {
    width: 200px;
  }

  .w-368 {
    width: 368px;
  }

  .mt-24 {
    margin-top: 24px !important;
  }

  .mt-12 {
    margin-top: 12px !important;
  }


  .mt-32 {
    margin-top: 32px !important;
  }

  .section {
    padding: 24px;
    background-color: #ffffff;
    width: 624px;
    border-radius: 6px;

    &.mt-8 {
      margin-top: 8px;
    }
  }

  .text-label {
    width: 190px;
    display: inline-flex;
    justify-content: flex-end;
  }

  .text-content {
    border: 1px dashed #dcdfe6;
    display: inline-block;
    padding: 0 15px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .el-row-flex {

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 40px;
    line-height: 40px;

    &.center {
      align-items: center;
    }

    &.end {
      align-items: flex-end;
    }

    &.right {
      justify-content: flex-end;
    }


    &:not(:first-child) {
      margin-top: 20px;
    }
  }

  .second-text {
    font-size: 18px;
    color: #333333;
    display: flex;
    align-items: center;
  }
}
</style>
